{% extends 'base_backend.html' %}
{% load static %}
{% block header_tail %}
    <link rel="stylesheet" href="{% static 'zhongbao/zhongbao_admin/css/style.css' %}">
    <link rel="stylesheet" href="{% static 'zhongbao/zhongbao_admin/css/iconfont.css' %}">
    <link rel="stylesheet" href="{% static 'plugins/datatables/dataTables.bootstrap.css' %}">
    <link rel="stylesheet" href="{% static 'public/ComboSelect/css/combo.select.css' %}">
    <link rel="stylesheet" href="{% static 'zhongbao/config/css/main.css' %}">
    <link rel="stylesheet" href="{% static 'laydate/theme/default/laydate.css' %}">
    <script src="{% static 'plugins\jQuery\jquery-2.2.3.min.js' %}"></script>

    <script src="{% static 'plugins/vue1/vue.js' %}"></script>
    <script src="{% static 'laydate/laydate.js' %}"></script>

    <script src="{% static 'enjoyhint/js/enjoyhint.min.js' %}"></script>
    <link rel="stylesheet" href="{% static 'enjoyhint/css/enjoyhint.css' %}">
    <style>
        .login-banner {
            width: 100%;
            background: url("{% static 'public/img/banner2.jpg' %}") center bottom/cover no-repeat;
        }
        #fist_pass{
            width: 30%;
            /*height: 30%;*/
            position: absolute;
            left: 50%;
            margin-left: -15%;
            top: 30%;
            z-index: 100;
            display: none;
            text-align: center;
            /*padding: 2%;*/
            border-radius: 10px;
            margin-bottom:20px;
            border:1px solid #A9C9E2;
            /*background-color: #E2EAF8;*/
        }
        .b1, .b2, .b3, .b4 { font-size:1px; overflow:hidden; display:block; }
        .b1 { height:1px; background:#AAA; margin:0 5px; }
        .b2 { height:1px; background:#E0E0E0; border-right:2px solid #AAA; border-left:2px solid #AAA; margin:0 3px; }
        .b3 { height:1px; background:#E3E3E3; border-right:1px solid #AAA; border-left:1px solid #AAA; margin:0 2px; }
        .b4 { height:2px; background:#E6E6E6; border-right:1px solid #AAA; border-left:1px solid #AAA; margin:0 1px; }
        .contentb { background:#E9E9E9; border-right:1px solid #AAA; border-left:1px solid #AAA; }
        #fist_pass p{
            margin: 6%;
        }
        #fist_pass a{
            margin-right: 7%;
            margin-left: 7%;
        }
        #fist_pass b{
            color: red;
            font-size: 20px;
        }
        #fist_pass h3{
            margin-top: 6%;
        }
    </style>
{% endblock header_tail %}
{% block section_content %}


<!--新手第一关-->
<div id="fist_pass" class="contentb">
    <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
    <h3>恭喜你完成新手任务第一关</h3>
    <p>赏金 <b>＋2</b></p>
    <p>继续完成任务会有更多奖赏哦~</p>
    <p>
        <a href="{% url 'task:accept' %}">前往新手任务第二关</a>
        <a onclick="fist_pass_none()">跳过新手任务</a>
    </p>
    <b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>
</div>
<!--跳过提醒-->
<!--<div id="skip_remind">-->
    <!--<h3>您可以前往我的任务/项目&#45;&#45;奖励任务模块，查看完成新手任务哦~</h3>-->
    <!--<p>我知道了</p>-->
<!--</div>-->
<div class="row" id="nav-app">
    <div class="col-lg-3 col-xs-3">
        <div class="small-box bg-red">
            <div class="inner">
                <p>领取任务</p>
                <h3 id="acceptTask">{{ source_count }}</h3>
            </div>
            <div class="icon">
                <i class="fa fa-bell" style="margin-top: 15px;"></i>
            </div>
            <a href="{% url 'task:accept' %}" class="small-box-footer" id="hint-get-task">
                详情&nbsp;
                <i class="fa fa-arrow-circle-right"></i>
            </a>
        </div>
    </div>
    <div class="col-lg-3 col-xs-3">
        <div class="small-box bg-aqua">
            <div class="inner">
                <p>我的任务</p>
                <h3 id="myTask">{{ task_count }}</h3>
            </div>
            <div class="icon">
                <i class="fa fa-sitemap" style="margin-top: 15px;"></i>
            </div>
            <a href="{% url 'task:mine' %}" class="small-box-footer" id="hint-my-task">
                详情&nbsp;
                <i class="fa fa-arrow-circle-right"></i>
            </a>
        </div>
    </div>
    <div class="col-lg-3 col-xs-3">
        <div class="small-box bg-green">
            <div class="inner">
                <p>我的配置</p>
                <h3 id="myConfig">{{ config_count }}<sup style="font-size: 20px"></sup></h3>
            </div>
            <div class="icon">
                <i class="fa fa-list" style="margin-top: 15px;"></i>
            </div>
            <a href="{% url 'task:my_config' %}" class="small-box-footer" id="hint-my-config">
                详情&nbsp;
                <i class="fa fa-arrow-circle-right"></i>
            </a>
        </div>
    </div>
    <div class="col-lg-3 col-xs-3">
        <div class="small-box bg-yellow">
            <div class="inner">
                <p>我的收入</p>
                <h3 id="myIncome">{{ my_income }}</h3>
            </div>
            <div class="icon">
                <i class="fa fa-diamond" style="margin-top: 15px;"></i>
            </div>
            <a href="{% url 'task:my_income' %}" class="small-box-footer" id="hint-my-money">
                详情&nbsp;
                <i class="fa fa-arrow-circle-right"></i>
            </a>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-6">
        <div class="box box-primary box-solid">
            <div class="box-header with-border">
                <h3 class="box-title">最新需求</h3>
                <li class="pull-right"><a href="{% url 'task:accept' %}" class="text-muted">更多</a></li>
            </div>
            <div class="box-body">
                <table id="latest_tasks" border="1" class="table table-bordered table-hover table-striped">
                    <thead>
                        <tr>
                            <th><span style="float: left">网站名称</span></th>
                            <th><span style="float: left">域名</span></th>
                            <th><span style="float: left">录入时间</span></th>
                            <th><span style="float: left">赏金</span></th>
                            <th><span style="float: left">截止时间</span></th>
                            <th><span style="float: left">操作</span></th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for i in tasks %}
                        <tr style="height: 39px;" >
                            <td><a target="_Blank" href="{{ i.url }}">{{ i.name }}</a></td>
                            <td>{{ i.domain }}</td>
                            <td>{{ i.ctime }}</td>
                            <td>{{ i.reward }}</td>
                            <td>{{ i.deadline }}</td>
                            <td>
                                <button class="btn btn-info btn-xs" onclick="detailOneTask({{ i.id }})">详情</button>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="col-md-6">
        <div class="box box-primary box-solid">
            <div class="box-header with-border">
                <h3 class="box-title">月排行榜</h3>
                <li class="pull-right"><a href="#" class="text-muted">更多</a></li>
            </div>
            <div class="box-body">
                <table id="personal_ranking" border="1" class="table table-bordered table-hover table-striped">
                    <thead>
                        <tr>
                            <th><span style="float: left">排名</span></th>
                            <th><span style="float: left">用户名</span></th>
                            <th><span style="float: left">完成总量</span></th>
                            <th><span style="float: left">赏金总计</span></th>
                            <!--<th><span style="float: left">截止时间</span></th>-->
                            <!--<th><span style="float: left">操作</span></th>-->
                        </tr>
                    </thead>
                    <tbody>
                    {% if ranking %}
                        {% for i in ranking %}
                            <tr style="height: 39px;">
                                <td>{{ i.rank }}</td>
                                <td>{{ i.username }}</td>
                                <td>{{ i.complete_sum }}</td>
                                <td>{{ i.reward_sum }}</td>
                            </tr>
                        {% endfor %}
                    {% else %}
                        <tr style="height: 39px;">
                            <td colspan="4" style="text-align: center;">暂无数据</td>
                        </tr>
                    {% endif %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <!-- 重要通知框 -->
    <div class="col-md-3" style="position:fixed; top: 60%; right:1%;">
        <div class="box-success direct-chat direct-chat-success direct-chat-contacts-open">
            <div class="box-tools pull-right">
                <div style="position:fixed; right:3px;">
                    <button type="button" class="btn btn-block btn-danger" data-widget="chat-pane-toggle">
                        重<br>要<br>通<br>知</h3></button>
                </div>

            </div>

            <!-- Contacts are loaded here -->
            <div class="direct-chat-contacts" style="background: white; border: 1px solid #3C8DBC; border-radius: 3px; height: 255px;">
                <div class="box box-primary box-solid" style="border: none; box-shadow: none;">
            <div class="box-header with-border">
              <h3 class="box-title">重要通知</h3>

              <div class="box-tools pull-right">
                <button type="button" class="btn btn-box-tool" data-widget="chat-pane-toggle" style="padding: 0;">
                  <small class="contacts-list-date pull-right" style="color: white;">收 起</small>
                </button>
              </div>
              <!-- /.box-tools -->
            </div>
            <!-- /.box-header -->
            <div class="box-body" style="padding: 10px;">
                {% for notice in side_notice %}
                    {% if notice.position == 1 %}
                        <p><span class="contacts-list-msg" style="color: black;width: 100%;height: 100%;">{{ notice.content }}</span></p>
                    {% endif %}
                {% endfor %}
            </div>
            <!-- /.box-body -->
          </div>

            </div>
        </div>
    </div>
</div>
</div>
{% endblock section_content %}

{% block jquery_js %}

{% endblock jquery_js %}

{% block body_tail %}

<script type="text/javascript">

    $(document).ready(function () {
        $.ajaxSetup({
            data: {csrfmiddlewaretoken: '{{ csrf_token }}'}
        });
    });

    function detailOneTask(tid){
       var url = "{% url 'task:detail' %}" + "?id=" + tid + "&type=task" + "&user=user";
       //window.location.href = url;
       window.open(url);
    }

    function changeColor(id, color) {
        //$(id).parent().parent().parent().children().children().children().find("li[color='green']");
        $(id).parent().parent().addClass("active");
        $(id).children().css("color", color);
    }

    //$("#taskManager").addClass("active");
    changeColor("#index", "#00FF7F");
    $('#nav_index').addClass("active");
</script>
<!--新手任务-->
{% if not new_tasks %}
    <!--<script src="{% static 'enjoyhint/js/hint-sequence.js' %}"></script>-->
    <script>
        function setCookie(key,value,t) {
            var oDate=new Date();
            oDate.setDate(oDate.getDate()+t);
            document.cookie=key+"="+value+"; expires="+oDate.toDateString();
        }
        function getCookie(key){
            var arr1=document.cookie.split("; ");
            for(var i=0;i<arr1.length;i++){
                var arr2=arr1[i].split("=");
                if(arr2[0]==key){
                    return decodeURI(arr2[1]);
                }
            }
        }
        //封装一个移除cookie的函数
        function removeCookie(key){
            setCookie(key,"",-1);//把cookie设置为过期
        }
        // removeCookie('NewbieSkip');
        if(getCookie('NewbieSkip')!=='1') {
            // 跳过新手任务
            function fist_pass_none() {
                var fist = $('#fist_pass');
                fist.css('display', 'none');
                setCookie('NewbieSkip', '1', 365);
            }

            var a = document.getElementsByClassName("small-box-footer");
            for (var i = 0; i < a.length; i++) {
                a[i].href = "javascript:void(0);";
            }
            var enjoyhint_instance = new EnjoyHint({
                // onStart:function(){
                //     var date = new Date();
                //     start = date.getTime();
                //     alert(start);
                // },
                onEnd: function () {
                    $('#fist_pass').css('display', 'block');
                    $.post({
                        data: {
                            csrfmiddlewaretoken: '{{ csrf_token }}',
                            award_subtype: '1'
                        },
                        url: "{% url 'task:newbie_task' %}"
                    });
                    document.getElementById("hint-get-task").href = "{% url 'task:accept' %}";
                    document.getElementById("hint-my-task").href = "{% url 'task:mine' %}";
                    document.getElementById("hint-my-config").href = "{% url 'task:my_config' %}";
                    document.getElementById("hint-my-money").href = "{% url 'task:my_income' %}";
                }
            });

            var enjoyhint_script_steps = [
                {
                    'next .bg-red': '这里通往任务市场，可以去任务市场领取任务！',
                    'nextButton': {className: "fist", text: "下一步"},
                    'skipButton': {className: "mySkip", text: "跳过"},
                },
                {
                    'next .bg-aqua': '领取的任务会存到这里哦！',
                    'nextButton': {className: "myNext", text: "下一步"},
                    'skipButton': {className: "mySkip", text: "跳过"}
                },
                {
                    'next .bg-green': '上传的所有任务可以在这里查看哦！',
                    'nextButton': {className: "myNext", text: "下一步"},
                    'skipButton': {className: "mySkip", text: "跳过"}
                },
                {
                    'next .bg-yellow': '完成任务就可在这里看到你的赏金啦！',
                    'showSkip': false,
                    'nextButton': {className: "myNext", text: "知道了!"}
                }

            ];
            enjoyhint_instance.set(enjoyhint_script_steps);
            enjoyhint_instance.run();

            //点击跳过
            $('.enjoyhint_skip_btn').click(function () {
                document.getElementById("hint-get-task").href = "{% url 'task:accept' %}";
                document.getElementById("hint-my-task").href = "{% url 'task:mine' %}";
                document.getElementById("hint-my-config").href = "{% url 'task:my_config' %}";
                document.getElementById("hint-my-money").href = "{% url 'task:my_income' %}";
                setCookie('NewbieSkip', '1', 365);
                alert('您可以前往我的任务/项目--奖励任务模块，查看完成新手任务哦~');
            });
            // 页面停留时间
            var start, stop, step = 0;

            function dt() {
                var date = new Date();
                return date.getTime();
            }

            window.onload = function () {
                start = dt();
            };
            $(".enjoyhint_next_btn").click(function () {
                step++;
                stop = dt();
                tp = stop - start;
                $.post({
                    data: {
                        csrfmiddlewaretoken: '{{ csrf_token }}',
                        step: step,
                        tp: tp,
                        last_event: '',
                        next_event: '',
                        behavior_weight: '新手引导'
                    },
                    url: "{% url 'zhongbao_admin:behavior_record' %}"
                });
                start = stop
            })
        };
    </script>
{% endif %}
<!--新手任务结束-->
{% endblock body_tail %}